<template>
  <div>
    <div  style="width:14%;height: 130px;border-radius: 100px;display:inline-block;">

    </div>

    <br>
    <br>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="用户名" v-model="user.username" ><p class="message">{{user.username}}</p></el-descriptions-item>
      <el-descriptions-item label="昵称" v-model="user.name" class="message"><p class="message">{{user.name}}</p></el-descriptions-item>
      <el-descriptions-item label="性别" v-model="user.gender" class="message"><p class="message">{{user.gender}}</p></el-descriptions-item>
      <el-descriptions-item label="手机号码" v-model="user.phone" class="message"><p class="message">{{user.phone}}</p></el-descriptions-item>
      <el-descriptions-item label="电子邮箱" v-model="user.email" class="message"><p class="message">{{user.email}}</p></el-descriptions-item>
      <el-descriptions-item label="简介" v-model="user.intro" class="message"><p class="message">{{user.intro}}</p></el-descriptions-item>
      <el-descriptions-item label="余额" v-model="user.money" class="message"><p class="message">{{user.money}}</p></el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "showinfo",
  data(){
    return{
      id:"",
      user: {}
    }
  },
  methods:{
    loadUserInfo(){
      console.log("进入此方法");
      let jwt = localStorage.getItem('jwt');
      console.log(jwt);
      if (!jwt) {
        this.$message.error("未登录！")
        this.$router.push("/login");
      }
        const decode = this.jwt_decode(jwt);
        console.log(decode.id);
        this.id=decode.id;
        let url = "http://localhost:8091/user/"+this.id;
        console.log(url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
        console.log(response);
        let responseBody = response.data;
        console.log(responseBody);
        this.user = responseBody.data;
        console.log("数据1111112222222")
        console.log(this.user)
      });
    },
  },
  created() {
    console.log("mounted..")
    this.loadUserInfo();
  }
}
</script>

<style scoped>
.message{
  width: 20em;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
